<template>
  <div class="dy-panel">
    <div class="dy-panel-main">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closePhotoLayer"></div>
      </div>
      <div class="dy-panel-content">
        <contentTitle :title="'图片'"/>
        <div class="img-big">
          <el-image :src="showImg" style="height: 400px;width: 600px"></el-image>
        </div>
        <div class="img-pre" v-if="imgItems.length > 1">
          <div class="img-pre-item" v-for="(img,index) in imgItems" @click="setVal(index)">
            <el-image :src="img" class="sm"></el-image>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import ContentTitle from "./contentTitle.vue";
import {onMounted, ref, watch} from "vue";

const prop = defineProps({
  imgItems: Array
})
const emit = defineEmits(['closePhotoLayer']);
const closePhotoLayer = function (){
  emit('closePhotoLayer')
}
let showImg = ref(prop.imgItems[0]); 
watch(prop, () => {
  showImg.value = prop.imgItems[0]
})

const setVal = function (item){
  showImg.value = prop.imgItems[item]
}

</script>
<style scoped>

.img-big{
  padding: 1vh;
  margin: auto;
  text-align: center;
}

.img-pre{
  display: flex;
  .img-pre-item{
    width: 100px;
    height: 100px;
    margin: 1vh;
    cursor: pointer;
    .sm{
      width: 100%;
      height: 100%;
    }
  }
}

.dy-panel{
  position: fixed;
  top: 17vh;
  width: 100%;
  z-index: 1;
  .dy-panel-main{
    background: rgba(5, 36, 44, 0.9);
    width: 80vh;
    min-height: 50vh;
    margin: 0 auto;
    padding-right: 2.5vh;
    position: relative;
    .dy-panel-header{
      height: 3vh;
      .dy-panel-close{
        position: absolute;
        height: 2.6vh;
        width: 2.6vh;
        background-image: url("../../assets/img/public/关闭.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        right: 1vh;
        top: 2vh;
        cursor: pointer;
      }
    }
    .dy-panel-content{
      display: flex;
      padding: 1vh;
      flex-wrap: wrap;
    }
  }
}
</style>